<template>
  <div class='ClearAnswerDialog-container'>
    <view v-if="show" class="clear-alert-container">
      <view class="clear-content-bg">
        <text class="clear-title">温馨提示</text>
        <text class="clear-content">您确定要清空当前做题记录并重新开始吗？</text>
        <view style="margin-top: 72upx;display: flex;flex-direction: row">
          <view class="clear-btn" @click="show=false">取消</view>
          <view class="clear-btn" style="margin-left: 20upx;background-color:#3073F6;color:#FFFFFF "
                @click="clearAnswer">确定
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import {questionApi} from "@/api";
import questionCache from "@/libs/questionCache";

export default {
  name: 'ClearAnswerDialog',
  props: ['type', 'storeId'],
  data() {
    return {
      show: false
    }
  },
  mounted() {
    questionCache.getStore(this.storeId).subscribe('showClearAnswerDialog', () => {
      this.show = true
    })
  },
  methods: {
    async clearAnswer() {
      await questionApi.clearAnswer(this.type)
      questionCache.getStore(this.storeId).publish('clearAnswer')
      this.show = false
      uni.showToast({
        title: '清除成功！',
        icon: 'none',
        duration: 2000
      });
    }
  }
}
</script>

<style lang='scss'>
.ClearAnswerDialog-container {
  .clear-alert-container {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    justify-content: center;
    align-items: center;

    .clear-content-bg {
      display: flex;
      flex-direction: column;
      background-color: white;
      width: 558upx;
      height: 410upx;
      border-radius: 24upx;
      align-items: center;

      .clear-title {
        margin-top: 56upx;
        font-size: 36upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        align-self: center;
      }

      .clear-content {
        margin-top: 18upx;
        font-size: 30upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 48upx;
        margin-left: 50upx;
        margin-right: 50upx;
      }

      .clear-btn {
        display: flex;
        background-color: #F2F4F7;
        width: 232upx;
        height: 90upx;
        justify-content: center;
        align-items: center;
        font-size: 30upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #474849;
        border-radius: 45upx;
      }
    }
  }
}
</style>
